<template>
  <div class="bg-grey ">
    <template v-if="status == 'approval_list'">
      <div class="top-info">
        <template v-if="infos.appperson_icon != ''">
          <img class="person-img" :src="`${$common.filePath}${infos.appperson_icon}`" @click="checkIdCard(infos.uid)">
        </template>
        <template v-else>
          <img class="person-img" src="../../assets/notification/head.png" @click="checkIdCard(infos.uid)">
        </template>
        <p class="top-text">{{infos.appperson}}发起借阅审批</p>
      </div>
    </template>
    <div class="center-content">
      <van-card class="card-class">
        <div slot="thumb">
          <van-image class="img-class" width="101" height="142" radius="4px" :src="`${$common.filePath}${infos.img}`" />
          <template v-if="(status == 'list' || status == 'borrowed') && (type == '1' || type == '3')">
            <van-tag type="danger" size="medium" class="tag-class">已借出</van-tag>
          </template>
          <template v-if="(status == 'list' || status == 'borrowed') && (type == '2' || type == '4')">
            <van-tag type="success" size="medium" class="tag-class">可借阅</van-tag>
          </template>
           <template v-if="status == 'approval_list' && type == '1'">
            <van-tag type="danger" size="medium" class="tag-class">待审核</van-tag>
          </template>
        </div>
        <div slot="title">
          <p class="title-info van-ellipsis">{{infos.bookname}}</p>
        </div>
        <div slot="desc">
          <p class="book-info van-ellipsis">作者：{{infos.author}}</p>
          <p class="book-info van-ellipsis">出版社：{{infos.publishing}}</p>
          <p class="book-info van-ellipsis">发布者：{{infos.name}}</p>
          <p class="book-info van-ellipsis">发布时间：{{infos.date}}</p>
        </div>
      </van-card>
      <van-cell-group :border="false">
        <van-cell title="书籍编号" :value="infos.bookumber" title-class="left-class" 
        :border="false"/>
        <template v-if="status != 'approval_list'">
          <van-cell title="存放地点" :value="infos.appendix" title-class="left-class" 
          :border="false"/>
          <van-cell title="图书数量" :value="infos.booknum" title-class="left-class" 
          :border="false"/>
        </template>
        <template v-if="status == 'approval_list'">
          <van-cell title="申请时间" :value="infos.appdate" title-class="left-class" 
          :border="false"/>
          <van-cell title="审批人" :value="infos.name" title-class="left-class" 
          :border="false"/>
        </template>
      </van-cell-group>
    </div>
    <div class="footer-content">
      <p class="foot-title">图书简介</p>
      <div class="padding-b-50" v-html="infos.content"></div>
    </div>
    <div class="footer-btn">
      <template v-if="status == 'approval_list' && type == '1'">
        <van-row type="flex" justify="space-between" class="btn-row">
          <van-col span="11">
            <van-button type="default" size="large" class="btn-one" @click="defined('2')">拒 绝</van-button>
          </van-col>
          <van-col span="11">
            <van-button type="info" size="large" class="border-btn" @click="approvalbtn('3')">批 准</van-button>
          </van-col>
        </van-row>
      </template>
      <template v-if="(status == 'list' || status == 'borrowed') && type=='3'">
        <van-button type="default" size="large" color="#CACACA">已借出</van-button>
      </template>
      <template v-if="(status == 'list' || status == 'borrowed') && type=='1'">
        <van-button type="default" size="large" color="#CACACA">正在审批</van-button>
      </template>
      <template v-if="(status == 'list' || status == 'borrowed') && (type=='2' || type=='4' || type == '0')">
        <van-button type="info" size="large" @click="borrowbtn">马上借阅</van-button>
      </template>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default{
    data() {
      return{
        status: "",//tab页
        type: "",//图书状态
        id: "",//图书id
        listId:"",//列表id
        infos:{}
      }
    },
    activated() {
      this.status=""//tab页
      this.type=""//图书状态
      this.id=""//图书id
      this.listId=""
      this.infos={}
      this.$bridge.callHandler('navBack')
      this.$bridge.callHandler('navTitle', {title: '图书详情'})

      this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
        this.$router.go(-1)
        responseCallback('go(-1)')
      })

      this.status = this.$route.query.status
      this.id = this.$route.query.id
      this.listId = this.$route.query.listId
      this.showDetail()
    },
    methods:{
      /**
       * 详情
       * @return {[type]} [description]
       */
      showDetail() {
        let imgReg = /<img.*?(?:>|\/>)/gi;
        let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
        let config = {
          method: "post",
          url: `${this.$common.basePath}book/book_manage.php`,
          data: {
            do:"book_detail",
            id: this.$route.query.id
          }
        }
        this.$axios(config).then(res => {
          let obj = res.data
          obj.content = obj.content.replace(/<img src="/g,'<img width="100%" src="'+this.$common.filePath)
          this.infos = obj
          // 1,待审;2,未通过;3, 借阅中;4,己还
          this.type = res.data.type
        }).catch(err => {

        })
      },
      /**
       * 借阅审批
       * @return {[type]} [description]
       */
      approvalbtn(type) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认批准？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          // on confirm
          let config = {
            method:"post",
            url: `${this.$common.basePath}book/book_manage.php`,
            data: {
              do: 'approval',
              id: this.listId,
              type: type,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              type:"success",
              message:'成功',
              forbidClick:true
            })
            setTimeout(_ => {
              this.$router.go(-1)
            },2000)
          }).catch(err => {

          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 拒绝
       * @return {[type]} [description]
       */
      defined(type) {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认拒绝？'
        }).then(() => {
          this.$bridge.callHandler('cancelNavKeepView')
          // on confirm
          let config = {
            method:"post",
            url: `${this.$common.basePath}book/book_manage.php`,
            data: {
              do: 'approval',
              id: this.listId,
              type: type,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$router.go(-1)
          }).catch(err => {

          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 借阅按钮
       * @return {[type]} [description]
       */
      borrowbtn() {
        this.$bridge.callHandler('navKeepView')
        this.$dialog.confirm({
          title: '提示',
          message: '是否确认借阅？'
        }).then(() => {
          // 取消遮罩
          this.$bridge.callHandler('cancelNavKeepView')
          let config = {
            method:"post",
            url: `${this.$common.basePath}book/book_manage.php`,
            data: {
              do: 'apply',
              id: this.id,
              user_id: this.$store.state.userId
            }
          }
          this.$axios(config).then(res => {
            this.$toast({
              type:"success",
              message:'借阅成功',
              forbidClick:true
             })
            setTimeout(_ => {
              this.$router.go(-1)
            },2000)
          }).catch(err => {

          })
        }).catch(() => {
          // on cancel
          this.$bridge.callHandler('cancelNavKeepView')
        });
      },
      /**
       * 用户信息
       */
      checkIdCard(uid){
        console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .padding-b-50{
    padding-bottom: 20px;
  }
  .top-info{
    height: 35px;
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
  }
  .top-text{
    margin-left: 15px;
    color: #333333;
    font-size: 17px;
    font-weight: bold;
  }
  .center-content{
    margin: 12px 0;
  }
  .card-class{
    background-color: #fff;
    padding: 15px 15px 0 15px;
  }
  .img-class{
    position: relative;
  }
  .tag-class{
    position: absolute;
    top: 116px;
    left: 5px;
  }
  .title-info{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 0 15px;
  }
  .book-info{
    color: #999999;
    font-size: 14px;
    margin: 10px 0px 10px 15px;
  }
  .left-class{
    color: #999999;
    font-size: 17px;
    max-width: 90px;
  }
  .footer-content{
    padding: 15px 15px 15px 15px;
    background-color: #fff;
    height: calc(100vh - 380px);
  }
  .foot-title{
    color: #333333;
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 10px 0;
  }
  .footer-btn{
    position: fixed;
    bottom: 0;
    background-color: #fff;
    width: calc(100vw - 30px);
    border-top: 1px solid rgba(0, 0, 0, 0.14);
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 3px;
    padding-bottom: 3px;
  }
  .btn-row{
    width: 100%;
  }
  .btn-one{
    border: none;
  }
  .border-btn{
    border-radius: 4px;
  }
  .person-img{
    width: 40px;
    height: 40px;
    border-radius: 4px;
  }
</style>